<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>幸运大转盘</title>
	<script src="js/jquery.min.js"></script>
	<script src="js/turntable.js"></script>
	<script type="text/javascript" src="https://cdn.aodianyun.com/dms/rop_client.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
			-webkit-tap-highlight-color: transparent;
		}

		body {
			background-color: rebeccapurple;
		}

		.top {
			text-align: center;
			color: #fff;
			font-size: 27px;
			font-style: italic;
			margin-top: 85px;
			margin-bottom: 40px;
			cursor: pointer;

		}

		.lottery {
			width: 100%;
			position: relative;
			display: inline-block;
			text-align: center
		}

		.lottery .cover {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
		}

		#start {
			width: 152px;
			height: 163px;
			background-image: url(images/start.png);
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -76px;
			margin-top: -82px;
			cursor: pointer;
			z-index: 20;
			-webkit-tap-highlight-color: transparent;
		}

		#myCanvas {
			width: 100%;
		}

		#message {
			text-align: center;
			color: #ffffff;
			font-size: 50px;
		}

		#app {
			max-width: 375px;
			margin: auto;
		}

		#form {
			display: none;
			position: absolute;
			top: 70px;
			left: 50%;
			transform: translate(-50%);
			background: #fff;
			z-index: 100;
			text-align: center;
			padding: 20px 0;
			border-radius: 5px;
			min-width: 320px;
		}

		#form .opt {
			font-size: 25px;
			margin-bottom: 25px;
		}

		#form .info {
			padding: 10px;
			font-size: 12px;
			text-align: left;
			color: #dbb239;
		}

		#form .update {
			margin-top: 40px;
			margin-bottom: 20px;
		}

		#form .update button {
			margin: 0 10px;
			color: #fff;
			background-color: #409eff;
			border-color: #409eff;
		}

		#form input {
			width: 80%;
			margin-bottom: 5px;
			text-align: center;
		}

		#form .close {
			position: absolute;
			top: 6px;
			right: 10px;
			color: blue;
			font-size: 13px;
			cursor: pointer;
		}

		.no-select {
			-webkit-touch-callout: none;
			/* iOS Safari */
			-webkit-user-select: none;
			/* Chrome/Safari/Opera */
			-moz-user-select: none;
			/* Firefox */
			-ms-user-select: none;
			/* Internet Explorer/Edge */
			user-select: none;
			/* Non-prefixed version, currently supported by most modern browsers */
		}
	</style>
</head>

<body>
	<div id="app">
		<div id="form">
			<div class="close no-select" onclick="closeSet()">关闭</div>
			<div class="opt no-select">奖项设置</div>
			<div class="input">
				<input type="text" maxlength="4" />
				<input type="text" maxlength="4" />
				<input type="text" maxlength="4" />
				<input type="text" maxlength="4" />
				<input type="text" maxlength="4" />
				<input type="text" maxlength="4" />
				<input type="text" maxlength="4" />
				<input type="text" maxlength="4" />
				<input type="text" maxlength="4" />
			</div>
			<div class="update no-select">
				<button onclick="submit()">保存</button>
				<button onclick="resSet()">重置</button>
			</div>
			<div class="info">
				奖项请输入4字以内：指定人喝、下个人喝、自己喝、大家喝、一起喝、抱一下、亲一下、摸一下、唱首歌、跳个舞....
			</div>
		</div>
		<div class="top no-select" id="set">幸运大转盘&nbsp;不服你就来</div>
		<div class="lottery">
			<canvas id="myCanvas" width="600" height="600">
				当前浏览器版本过低，请使用其他浏览器尝试
			</canvas>
			<div class="cover"></div>
			<div id="start"></div>
		</div>
		<div>
			<p id="message"></p>
		</div>
	</div>
	<script>
		var number = null;
		var openSet = 0;
		var wheelSurf

		var defauleData = {
			"success": true,
			"list": [{
				"id": 1,
				"name": "亲一下",
				"image": "images/1.png",
				"rank": 1,
				"percent": 3
			},
			{
				"id": 2,
				"name": "大家喝",
				"image": "images/2.png",
				"rank": 2,
				"percent": 5
			},
			{
				"id": 3,
				"name": "指定人喝",
				"image": "images/3.png",
				"rank": 3,
				"percent": 2
			},
			{
				"id": 4,
				"name": "自己喝",
				"image": "images/4.png",
				"rank": 4,
				"percent": 49
			},
			{
				"id": 5,
				"name": "抱一下",
				"image": "images/5.png",
				"rank": 5,
				"percent": 30
			},
			{
				"id": 6,
				"name": "唱首歌",
				"image": "images/6.png",
				"rank": 6,
				"percent": 1
			},
			{
				"id": 7,
				"name": "跳个舞",
				"image": "images/7.png",
				"rank": 7,
				"percent": 10
			},
			{
				"id": 8,
				"name": "其他人喝",
				"image": "images/7.png",
				"rank": 8,
				"percent": 10
			},
			{
				"id": 9,
				"name": "下个人喝",
				"image": "images/7.png",
				"rank": 9,
				"percent": 10
			}
			]
		}

		// 初始化装盘数据 正常情况下应该由后台返回
		var initData = defauleData

		var storageData = localStorage.getItem("data")
		if (storageData) {
			initData = JSON.parse(storageData)
		}



		// 计算分配获奖概率(前提所有奖品概率相加100%)
		function getGift () {
			var percent = Math.random() * 100
			var totalPercent = 0
			var k = Math.floor(Math.random() * initData.list.length)
			if (number !== null) {
				k = number - 1
				number = null
			}
			return initData.list[k]
			// for (var i = 0, l = initData.list.length; i < l; i++) {
			// 	totalPercent += initData.list[i].percent
			// 	if (percent <= totalPercent) {
			// 		return initData.list[i]
			// 	}
			// }
		}

		var list = {}

		var angel = 360 / initData.list.length
		// 格式化成插件需要的奖品列表格式
		for (var i = 0, l = initData.list.length; i < l; i++) {
			list[initData.list[i].rank] = {
				id: initData.list[i].id,
				name: initData.list[i].name,
				image: initData.list[i].image
			}
		}
		// 查看奖品列表格式

		// 定义转盘奖品
		wheelSurf = $('#myCanvas').WheelSurf({
			list: list, // 奖品 列表，(必填)
			outerCircle: {
				color: '#df1e15' // 外圈颜色(可选)
			},
			innerCircle: {
				color: '#f4ad26' // 里圈颜色(可选)
			},
			dots: ['#fbf0a9', '#fbb936'], // 装饰点颜色(可选)
			disk: ['#ffb933', '#ffe8b5', '#ffb933', '#ffd57c', '#ffb933', '#ffe8b5', '#ffd57c'], //中心奖盘的颜色，默认7彩(可选)
			title: {
				color: '#5c1e08',
				font: '19px Arial'
			} // 奖品标题样式(可选)
		})

		// 初始化转盘
		wheelSurf.init()
		// 抽奖
		var throttle = true;
		$("#start").on('click', function () {

			var winData = getGift() // 正常情况下获奖信息应该由后台返回
			$("#message").html('')
			if (!throttle) {
				return false;
			}
			throttle = false;
			var count = 0
			// 计算奖品角度

			for (const key in list) {
				if (list.hasOwnProperty(key)) {
					if (winData.id == list[key].id) {
						break;
					}
					count++
				}
			}

			// 转盘抽奖，
			wheelSurf.lottery((count * angel + angel / 2), function () {
				$("#message").html(winData.name)
				throttle = true;
			})
		})

		var index = null;

		function resetOpenSet () {
			if (index !== null) {
				clearTimeout(index)
				index = null
			}
			index = setTimeout(() => {
				openSet = 0
			}, 3000)
		}

		function showSet () {
			$("#form").find('input').map((key, item) => {
				$(item).val(initData.list[key].name)
			})
			$("#message").html("")
			$("#form").show()
		}

		function resSet () {
			$("#form").find('input').map((key, item) => {
				$(item).val(defauleData.list[key].name)
			})
		}

		function closeSet () {
			$("#form").hide()
		}

		function submit () {
			$("#form").find('input').map((key, item) => {
				initData.list[key].name = $(item).val() === '' ? '无' : $(item).val()
			})
			localStorage.setItem("data", JSON.stringify(initData))
			alert('设置成功')
			location.reload()
		}

		$("#set").on('click', function () {
			openSet += 1;
			if (openSet >= 3) {
				openSet = 0
				showSet()
			} else {
				resetOpenSet()
			}
		})


		function getParams (url) {
			const regex = /[?&]([^=#]+)=([^&#]*)/g;
			const params = {};
			let match;
			while (match = regex.exec(url)) {
				params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
			}
			return params;
		}

		function generateRandomString (length) {
			const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
			let result = '';
			for (let i = length; i > 0; --i) {
				result += chars[Math.floor(Math.random() * chars.length)];
			}
			return result;
		}

		$(() => {

			setInterval(() => {
				if ($('#message').css('display') == 'block') {
					$('#message').hide()
				} else {
					$('#message').show()
				}
			}, 300)

			var params = getParams(location.href);
			if (params.t !== undefined) {
				var pubkey = 'pub_32389ade98c9ca34ddd2d3d3678ef650'
				var subkey = 'sub_d45ab45c55957c9395adcd266b288ce2'
				var clientid = generateRandomString(16);
				var topic = params.t
				if (window.location.protocol === "https:") {
					ROP.Enter(pubkey, subkey, clientid, true)
				} else {
					ROP.Enter(pubkey, subkey)
				}
				//连接成功
				ROP.On("enter_suc", function () {
					console.log("EnterSuc");
				})
				//连接失败
				ROP.On("enter_fail", function (err) {
					console.log("EnterFail:" + err);
				})
				//离线，以及开始重连的事件
				ROP.On("reconnect", function () {
					console.log("reconnect:");
				})
				ROP.On("offline", function (err) {
					console.log("offline:" + err);
				})
				//收到关注的话题的消息
				ROP.On("publish_data", function (data, topic) {
					if (data >= 1 && data <= 9) {
						number = data
					}
				})
				//关注某个话题
				ROP.Subscribe(topic)
			}
		})
	</script>

	<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
	</div>
</body>

</html>